<template>
	<mainHeader title="设置" :haveBack="true" goto="index"></mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<view class="setting_list">
			<view class="setting_group base_box">
				<view class="setting_one clickBox">
					<view class="setting_one_text">
						是否显示预算
					</view>
					<view class="setting_one_right">
						<switch class="setting_one_right_switch" color="#6666ff" @change="changeShowYusuan"
							:checked="showYusuan" />
					</view>
				</view>
			</view>
			<view class="setting_group base_box">
				<changeMoneySymbolVue>
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							金钱符号
							<view class="setting_one_text_side">
								只改变显示效果，不实际转换汇率
							</view>
						</view>
						<view class="setting_one_right">
							{{store.state.setting.MoneySymbol}}
						</view>
					</view>
				</changeMoneySymbolVue>
				<changeThemeVue v-if="isShowSet.theme">
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							切换主题
						</view>
						<view class="setting_one_right">
							<view class="setting_one_right_showTheme base_box_round"
								:style="'background:'+store.state.theme">

							</view>
						</view>
					</view>
				</changeThemeVue>
				<changeTypeColorVue>
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							支出/收入颜色
						</view>
						<view class="setting_one_right">
							<view class="setting_one_right_tag " :class="'incomeColor_'+store.state.setting.typeTag">
								+
							</view>
							<view class="setting_one_right_tag" :class="'expensesColor_'+store.state.setting.typeTag">
								-
							</view>
						</view>
					</view>
				</changeTypeColorVue>
			</view>
			<view class="setting_group base_box">
				<settingPopupBgVue>
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							弹出框背景模糊
						</view>
						<view class="setting_one_right">
							<switch class="setting_one_right_switch" color="#6666ff" @change="changePopupBg"
								:checked="popupBg" />
						</view>
					</view>
				</settingPopupBgVue>
				<view class="setting_one clickBox">
					<view class="setting_one_text">
						多行输入框
					</view>
					<view class="setting_one_right">
						<switch class="setting_one_right_switch" color="#6666ff" @change="changeInputArea"
							:checked="inputArea" />
					</view>
				</view>
			</view>
			<view class="setting_group base_box" v-if="isShowSet.order">
				<openFileVue>
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							导入记录
						</view>
						<image class="setting_one_icon" src="@/static/base/right.png" mode=""></image>
					</view>
				</openFileVue>
				<outerFileVue>
					<view class="setting_one clickBox">
						<view class="setting_one_text">
							导出记录
						</view>
						<image class="setting_one_icon" src="@/static/base/right.png" mode=""></image>
					</view>
				</outerFileVue>
			</view>
			<view class="setting_group base_box">
				<view class="setting_one clickBox" @click="clearAllOrder()">
					<view class="setting_one_text">
						清空记录
					</view>
					<image class="setting_one_icon" src="@/static/base/right.png" mode=""></image>
				</view>
				<view class="setting_one clickBox" @click="clearAllYusuan()" v-show="showYusuan">
					<view class="setting_one_text">
						清空预算
					</view>
					<image class="setting_one_icon" src="@/static/base/right.png" mode=""></image>
				</view>
				<view class="setting_one clickBox" @click="clearAll()">
					<view class="setting_one_text">
						初始化
					</view>
					<image class="setting_one_icon" src="@/static/base/right.png" mode=""></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import settingPopupBgVue from "@/components/setting/settingPopupBg.vue";
	import outerFileVue from "@/components/setting/outerFile.vue";
	import openFileVue from "@/components/setting/openFile.vue";
	import changeTypeColorVue from "@/components/setting/changeTypeColor.vue";
	import changeThemeVue from "@/components/setting/changeTheme.vue";
	import changeMoneySymbolVue from "@/components/setting/changeMoneySymbol.vue";
	import store from "@/store/index.js"
	import {
		myShowToast,
		handleLoad
	} from '@/uitls/tool.js'
	import {
		ref,
		computed
	} from 'vue'

	const popupBg = computed(() => store.state.setting.popupBg);
	const inputArea = computed(() => store.state.setting.inputArea);
	const showYusuan = computed(() => store.state.setting.showYusuan);

	const changePopupBg = (e) => {
		store.commit("setting/changePopupBg", e.detail.value)
	}
	const changeInputArea = (e) => {
		store.commit("setting/changeInputArea", e.detail.value)
	}
	const changeShowYusuan = (e) => {
		store.commit("setting/changeShowYusuan", e.detail.value)
	}
	const isShowSet = ref({
		theme: false,
		order: false,
	})
	// #ifdef APP-PLUS
	isShowSet.value.theme = true
	// #endif
	// #ifdef APP-PLUS||H5
	isShowSet.value.order = true
	// #endif
	const confirmAction = (title, content, action) => {
		uni.showModal({
			title: title,
			content: content,
			success: function(res) {
				if (res.confirm) {
					action()
				} else {
					myShowToast("操作中止")
				}
			}
		});
	};
	const clearAllOrder = () => {
		confirmAction('提示', "清除记录操作不可逆,请谨慎操作", () => {
			uni.removeStorageSync("allData");
			store.state.mainData.allData = {};
			store.commit("mainData/updateData")
			handleLoad("清除记录成功")
		});
	}
	const clearAllYusuan = () => {
		confirmAction('提示', "清除预算操作不可逆,请谨慎操作", () => {
			uni.removeStorageSync("yusuanData");
			store.state.mainData.yusuanData = {};
			store.commit("mainData/updateData")
			handleLoad("清除预算成功")
		});
	}
	const clearAll = () => {
		confirmAction('提示', "初始化操作不可逆,请谨慎操作", () => {
			uni.clearStorageSync();
			// 根据平台执行不同的操作
			// #ifdef APP-PLUS
			plus.runtime.restart();
			// #endif
			// #ifndef APP-PLUS
			uni.reLaunch({
				url: "/pages/index/index"
			})
			setTimeout(() => location.reload(), 0)
			// #endif
			myShowToast("初始化成功")
		});
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.setting_list {
		.setting_group {
			margin: $mainBoxMargin;

			.setting_one {
				border-radius: $BaseBorderRadius;
				padding: 0.5em;
				padding-left: 1em;
				font-size: $bigFontsize;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				&_text {
					font-weight: bold;

					&_side {
						font-weight: normal;
						font-size: $smallFontsize;
						color: $baseBlack_big;
					}
				}

				&_right {
					display: flex;
					align-items: center;

					&_switch {
						transform: scale(0.8);

						::v-deep .uni-switch-input {
							margin-right: -0.5em;
						}
					}

					&_showTheme {
						width: $iconSize_base;
						height: $iconSize_base;
					}

					&_tag {
						font-weight: bold;
						font-size: $bigFontsize ;
					}
				}

				&_icon {
					width: $iconSize_base;
					height: $iconSize_base;
				}
			}
		}
	}
</style>